<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            width="50"
          ></el-table-column>

          <el-table-column label="商品图片" min-width="100">
            <template slot-scope="scope">
              <img
                style="width: 100px"
                :src="$fnc.getImgUrl(scope.row.product.piclink)"
              />
            </template>
          </el-table-column>

          <el-table-column label="编号" min-width="140">
            <template slot-scope="scope">
              {{ scope.row.hid || "----" }}
            </template>
          </el-table-column>

          <el-table-column label="商品名称" min-width="220">
            <template slot-scope="scope">
              {{ scope.row.product.title }}
            </template>
          </el-table-column>

          <el-table-column label="规格" min-width="160">
            <template slot-scope="scope">
              {{ scope.row.sku_cn }}
            </template>
          </el-table-column>

          <el-table-column label="进货价" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.cost_price | keepTwoNum }}元
            </template>
          </el-table-column>

          <el-table-column label="销售价" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.price | keepTwoNum }}
              元
            </template>
          </el-table-column>

          <el-table-column label="当前库存" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.stock }}
            </template>
          </el-table-column>

          <el-table-column label="所属级别" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.extract_id > 0 ? `分店` : `总部` }}
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="addShop(scope.row)"
              >
                退货
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <el-button
          :loading="$store.state.isLoading"
          size="mini"
          type="primary"
          @click="addShops()"
        >
          批量退货
        </el-button>
      </template>
    </tableComponents>

    <el-drawer
      :visible.sync="show_edit"
      direction="rtl"
      :modal="true"
      size="65%"
      class="user_edit_drawer"
    >
      <el-row style="padding: 0 30px 100px">
        <el-row style="text-align: left; padding: 0 0 20px">
          <el-button
            size="small"
            v-if="eidtList.length > 1"
            @click="batchSet(0)"
          >
            批量设置退货数量
          </el-button>
          <el-button
            size="small"
            v-if="eidtList.length > 1"
            @click="batchSet(2)"
          >
            批量设置退货金额
          </el-button>
          <el-button
            size="small"
            v-if="eidtList.length > 1"
            @click="batchSet(1)"
          >
            批量设置备注
          </el-button>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="eidtList"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
          @selection-change="handleSelectionChange1"
        >
          <el-table-column
            type="selection"
            align="center"
            width="50"
          ></el-table-column>

          <el-table-column label="商品" min-width="160">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>编号：</span>
                  <small>{{ scope.row.hid || "----" }}</small>
                </p>
                <p>
                  <span>商品名称：</span>
                  <small> {{ scope.row.product.title }}</small>
                </p>
                <p>
                  <span>规格：</span>
                  <small>{{ scope.row.sku_cn }}</small>
                </p>
                <p>
                  <span>所属级别：</span>
                  <small>
                    {{ scope.row.extract_id > 0 ? `分店` : `总部` }}
                  </small>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="当前库存" align="center" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.stock }}
            </template>
          </el-table-column>

          <el-table-column label="退货数量" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.allocation"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="退货单价" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.money"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="退货总金额" align="center" min-width="120">
            <template slot-scope="scope">
              {{ (scope.row.money * scope.row.allocation || 0) | keepTwoNum }}
              元
            </template>
          </el-table-column>

          <el-table-column label="备注" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            min-width="80"
            v-show="eidtList.length > 1"
          >
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                icon="el-icon-delete"
                @click="delShopsItem(scope.$index)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tc" style="margin-top: 50px">
          <el-button
            :loading="$store.state.isLoading"
            size="small"
            type="primary"
            @click="saveBtn"
          >
            确定
          </el-button>
        </div>
      </el-row>
    </el-drawer>

    <el-dialog
      :close-on-click-modal="false"
      title="批量设置"
      :modal-append-to-body="false"
      :visible.sync="show_batch"
      class="tl size_13"
      width="700px"
    >
      <el-form label-width="140px">
        <el-form-item label="退货数量" v-if="edit_index == 0">
          <el-col :span="20">
            <el-input v-model="allocation" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="备注" v-if="edit_index == 1">
          <el-col :span="20">
            <el-input v-model="remark" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="退货金额" v-if="edit_index == 2">
          <el-col :span="20">
            <el-input v-model="money" size="small"></el-input>
          </el-col>
        </el-form-item>
        <div class="tc">
          <el-button
            :loading="$store.state.isLoading"
            size="small"
            @click="batchGet"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { allocationStockSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: allocationStockSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      extract_id: 0,
      multipleSelection: [],
      eidtList: [],
      show_edit: false,
      edit_info: {},
      multipleSelection1: [],
      show_batch: false,
      edit_index: -1,
      allocation: "",
      remark: "",
      money: "",
    };
  },
  components: {},
  created() {
    this.getNewsAll();
    if (this.$route.query.pid) {
      this.getDataByPid();
    }
  },
  methods: {
    getDataByPid() {
      var params = {};
      params.pid = this.$route.query.pid;
      this.$api.getShops.product_stock_findpid(params).then((res) => {
        if (res.data.code == 200) {
          this.eidtList = res.data.result;
          this.show_edit = true;
        }
      });
    },
    saveBtn() {
      if (this.eidtList.length == 0) {
        this.$fnc.alertError("请选择退货商品");
        return;
      }
      let dataList = [];
      for (let i of this.eidtList) {
        if (!i.allocation || i.allocation == "" || i.allocation == 0) {
          this.$fnc.alertError(
            "未填写退货数量",
            `编号：${
              i.extract_id > 0 ? i.sku.hid || "----" : i.hid || "----"
            }；商品名称：${i.product.title}；规格：${i.sku_cn}`
          );
          return;
        }
        if (i.extract_id) {
          dataList.push({
            pid: i.pid,
            sku_id: i.sku_id,
            stock: i.allocation,
            price: i.money,
            remark: i.remark || "",
            sku_iden: i.sku_iden,
            extract_id: i.extract_id,
          });
        } else {
          dataList.push({
            pid: i.pid,
            sku_id: i.id,
            price: i.money,
            stock: i.allocation,
            remark: i.remark || "",
            sku_iden: i.iden,
          });
        }
      }

      var params = {};
      params.stocks = JSON.stringify(dataList);
      this.$api.getShops.product_stock_refund(params).then((res) => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "退货成功",
            url: "/index/shop/return_stock",
          });
          this.show_edit = false;
          this.getNewsAll(this.searchAll);
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    batchGet() {
      let key = "";
      if (this.edit_index == 0) {
        key = "allocation";
      } else if (this.edit_index == 1) {
        key = "remark";
      } else if (this.edit_index == 2) {
        key = "money";
      }

      for (let i in this.multipleSelection1) {
        if (this.edit_index == 0) {
          this.$set(this.multipleSelection1[i], key, this.allocation);
        } else if (this.edit_index == 1) {
          this.$set(this.multipleSelection1[i], key, this.remark);
        } else if (this.edit_index == 2) {
          this.$set(this.multipleSelection1[i], key, this.money);
        }
      }
      this.edit_index = -1;
      this.show_batch = false;
    },
    batchSet(val) {
      if (this.multipleSelection1.length == 0) {
        this.$fnc.alertError("请选择退货商品");
        return;
      }
      this.edit_index = val;
      this.show_batch = true;
    },
    delShopsItem(i) {
      this.eidtList.splice(i, 1);
    },
    addShops() {
      if (this.multipleSelection.length == 0) {
        this.$fnc.alertError("请选择商品");
        return;
      }
      this.eidtList = JSON.parse(JSON.stringify(this.multipleSelection));

      for (let i in this.eidtList) {
        this.$set(
          this.eidtList[i],
          "money",
          this.$fnc.toFixedZ(this.eidtList[i].cost_price)
        );
        this.$set(this.eidtList[i], "allocation", 1);
        this.$set(this.eidtList[i], "remark", "");
      }

      this.show_edit = true;
    },
    addShop(item) {
      this.eidtList = [];
      var obj = JSON.parse(JSON.stringify(item));
      obj.money = this.$fnc.toFixedZ(item.cost_price);
      obj.allocation = 1;
      obj.remark = "";
      this.eidtList.push(item);
      this.show_edit = true;
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      params.extract_id = this.extract_id;

      this.$api.getShops.product_stock_query_stock(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      return item;
    },
  },
};
</script>

<style>
</style>